<template>
	<view class="container">
			<view v-if="loaded&&lists.length==0" class="empty_data">暂无数据</view>
			<view v-else style="background: #F5F5F5;">
				<view class="list-item" @click="navTo('/pages/course/detail_text?id='+item.id)" v-for="(item, index) in lists" :key="index">
					<view class="list-img">
						<view class="status-tag" :style="{background: item.background}">{{item.status_tag}}</view>
						<image :src="item.discover"></image>
					</view>
					<view class="list-title">
						<view class="list-title-name">{{item.name}}</view>
						<view class="list-detail">
							<view style="flex: 1;">共{{item.course_section_info_count}}节</view>
							<view>距您{{item.distance?item.distance:'0m'}}</view>
						</view>
						<view class="list-date">开课日期:{{item.course_time}}</view>
						<view class="list-op">
							<view class="font-w600">{{item.price}}</view>
							<view class="sign-coin-detail">
								签到最高可领{{item.score}}积分</view>
						</view>
					</view>
				</view>
				<uni-load-more  :status="loadingType"></uni-load-more>
			</view>

	</view>
</template>
<!-- 自定义一些组件测试 -->
<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import Api from '@/common/api'
	export default {
		components: {
			uniLoadMore,
		},
		data() {
			return {
				campus_id:0,
				page: 1,
				size: 6,
				more_data: true,
				loadingType:'more',
				loaded:false,
				lists:[],
				lat:'',
				lng:''
			}
		},

		onLoad(option) {
			this.campus_id = option.id;
			uni.setNavigationBarTitle({
				title:option.name
			})
			let loc = uni.getStorageSync('loc');
			if(loc!=''){
				this.lat=loc.lat;
				this.lng=loc.lng;
			}
			this.getList()
			
		},
		// 页面触底事件，加载下一页
		onReachBottom() {
			this.getList()
		},
		beforeCreate() {

		},
		beforeDestroy() {


		},

		methods: {
			//获取列表
			async getList(source){			
				if(!this.more_data ||this.loadingType === 'loading'){
					return;//没有数据不请求或防止重复加载
				}
				this.loaded = false;			
				this.loadingType = 'loading';
				let params = {page:this.page,size:this.size,campus_id:this.campus_id,lat:this.lat,lng:this.lng};
				let data = await Api.apiCall('get',Api.apiName.course_list,params);
				if(!data||data.data.list.length==0){//出错时
					this.loadingType='noMore'
					this.loaded = true;
					return;
				}
			
				setTimeout(()=>{
					
					this.lists=this.lists.concat(data.data.list)
					// loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.loaded=true;
					//判断是否还有数据， 有改为 more， 没有改为noMore
					if(data.data.list.length>0&&data.data.list.length==this.size){
						this.page++;
						this.loadingType = 'more';
					}else{
						this.loadingType = 'nomore';
						this.more_data=false;
					
					}
					
				}, 600);	
			}, 
		
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
		},


	}
</script>

<style lang="scss" scoped>
	page {
		// background: #000000;

	}
	.container {
		// position: relative;
		// width: 100%;
		// height: 100%;
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.list-item {
		display: flex;
		background: #FFFFFF;
		margin: 24rpx;
		border-radius: 20rpx;
	}

	.list-img {
		// padding: 20rpx;
		margin: 20rpx;
		position: relative;
		width: 252rpx;
		height: 252rpx;
		image {
			width: 252rpx;
			height: 252rpx;
			border-radius: 20rpx;
		}
	}

	.status-tag {
		position: absolute;
		z-index: 2;
		bottom: 0rpx;
		background: rgba(0, 0, 0, 0.5);
		width: 252rpx;
		text-align: center;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		color: #FFFFFF;
	}
	.list-title {
		// margin-left: 20rpx;
		// margin-top: 30rpx;
		font-size: 28rpx;
		width: 100%;
		margin: 20rpx;
	}

	.list-title-name {
		font-size: 30rpx;
		font-weight: 600
	}

	.list-detail {
		display: flex;
		color: #999999;
		margin-top: 24rpx;
	}

	.list-date {
		color: #999999;
		margin-top: 24rpx
	}

	.list-op {
		margin-top: 30rpx;
		display: flex;
		color: #ff0000;
		align-items: center;
	}
	.pad-r22{
		padding-right: 22rpx;
	}
	.font-w600{
		font-weight: 600;
	}
	.sign-coin-detail{
		margin-left: 14rpx;
		font-size: 20rpx;
		border: 1px solid #ff0000;
		padding: 4rpx
	}
	.empty_data {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
		opacity: 0.5;
		color: #999;
	}
</style>